<template>
  <div class="all">
    <!-- 项目信息 -->
    <div class="leftaaa">
      <div class="leftTop">
        <div class="title">
          <span class="word">项目信息</span>
        </div>
        <div class="line"></div>
        <div class="Onecontant">
          <div class="oneMiddle">
            <el-row>
              <el-col :span="12">
                <ul class="info">
                  <li v-if="state.d.address">
                    项目地址：{{ state.d.address }}
                  </li>
                  <li v-if="state.d.area">建筑面积：{{ state.d.area }}m²</li>
                  <li v-if="state.d.up">地上：{{ state.d.up }}m²</li>
                  <li v-if="state.d.down">地下：{{ state.d.down }}m²</li>
                  <li v-if="state.d.office">办公：{{ state.d.office }}m²</li>
                  <li v-if="state.d.shop">商城：{{ state.d.shop }}m²</li>
                  <li v-if="state.d.home">公寓：{{ state.d.home }}m²</li>
                  <li v-if="state.d.garage">车库：{{ state.d.garage }}m²</li>
                  <li v-if="state.d.hotel">酒店：{{ state.d.hotel }}m²</li>
                  <li v-if="state.d.level">星级：{{ state.d.level }}</li>

                  <li style="width: 100%" v-if="state.d.time">
                    竣工日期：{{ state.d.time }}
                  </li>
                  <li v-if="state.admin.cost">
                    投入成本：{{ state.admin.cost }}
                  </li>
                  <li v-if="state.admin.start">
                    OAO系统开始运作日期：{{ state.admin.start }}
                  </li>
                </ul>
              </el-col>
              <el-col :span="12">
                <img
                  style="width: 100px; height: 100px"
                  :src="`${state.d.img}`"
                  alt=""
                />
              </el-col>
            </el-row>
          </div>
          <div class="oneBottom">
            <div class="oneBottomBuleLeft">
              <div>
                <p class="blueTitle">OAO涉及系统介绍</p>
                <p class="blueTitle" style="line-height: 25px">
                  {{ state.admin.info }}
                </p>
              </div>
            </div>
            <div class="oneBottomBuleRight">
              <p class="blueTitle">重要文件</p>
              <div class="oneBottomBluessss">
                <div
                  class="blueTitleright"
                  v-for="item in state.d.file"
                  :key="item"
                >
                  <span>
                    {{ item.desc }}
                    ------
                    {{ item.time }}
                    <!-- 
                    {{
                      item.uploadFile
                        .split(".")[0]
                        .split("\/")
                        .at(-1)
                        .slice(0, 4) +
                      "-" +
                      item.uploadFile
                        .split(".")[0]
                        .split("\/")
                        .at(-1)
                        .slice(4, 6) +
                      "-" +
                      item.uploadFile
                        .split(".")[0]
                        .split("\/")
                        .at(-1)
                        .slice(6, 8) +
                      " " +
                      item.uploadFile
                        .split(".")[0]
                        .split("\/")
                        .at(-1)
                        .slice(8, 10) +
                      ":" +
                      item.uploadFile
                        .split(".")[0]
                        .split("\/")
                        .at(-1)
                        .slice(10, 12) +
                      ":" +
                      item.uploadFile
                        .split(".")[0]
                        .split("\/")
                        .at(-1)
                        .slice(12, 14)
                    }}
                    -->
                  </span>
                  <div class="blueicon">
                    <el-tooltip
                      class="box-item"
                      effect="dark"
                      content="查看"
                      placement="top-start"
                    >
                      <div @click="downloadFile(item.uploadFile, item)">
                        <sc-icon>
                          <sc-icon-See />
                        </sc-icon>
                      </div>
                    </el-tooltip>
                    <el-tooltip
                      class="box-item"
                      effect="dark"
                      content="下载"
                      placement="top-start"
                    >
                      <div
                        class="icon2"
                        @click="downloadFiles(item.uploadFile, item)"
                      >
                        <sc-icon>
                          <sc-icon-Download />
                        </sc-icon>
                      </div>
                    </el-tooltip>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Scene @dateChange="dateChange" :demand="demand" />
    </div>
    <div class="rightaaq">
      <Facility />
      <PT style="margin-top: 8px" />
      <Alarm style="margin-top: 8px; height: 410px" />
    </div>
    <!-- 查看的对话框 -->
    <el-dialog v-model="dialogVisible" title="文件简介" width="30%">
      <span>{{ state.d.text }}</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { saveAs } from "file-saver";
// import { download } from "@/utils/fileSaver";
import Scene from "./Scene-demand.vue";
import Facility from "./facility.vue";
import PT from "./PT.vue";
import Alarm from "./Alarm-analysis.vue";
import { onMounted, reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { inuserput } from "@/api/model/login";
import dayjs from "dayjs";
import isBetween from "dayjs/plugin/isBetween";

// import { ProjectGroupone } from "@/api/model/echarts";
import { AdminInputs } from "@/api/model/admins";
// import func from '../../../vue-temp/vue-editor-bridge';
const route = useRoute();
let dialogVisible = ref(false);
dayjs.extend(isBetween);

const dateChange = (val) => {
  if (val) {
    const res = JSON.parse(demand2.value);
    const rest = res.filter((item) =>
      dayjs(item.time).isBetween(val["0"], dayjs(val["1"]), "day", "[]")
    );
    demand.value = JSON.stringify(rest);
  }
};
let state = reactive({
  dat: {},
  a: {
    project_id: route.params.id || sessionStorage.getItem("proid"),
  },
  b: 1,
  d: {},
  admin: { start: "", cost: "", info: "" },
  data1: [],
  data2: [],
  data3: [],
});
let demand = ref("");
let demand2 = ref("");

onMounted(async () => {
  var id = route.params.id;
  console.log(id);
  // getdata();
  getsuerput();
  
  // 新注释
  // getdatatop(state.a.project_id);
  // getdatacenter(id);
  // getdatabottom(state.a.project_id);

  // if (id) {
  // 	console.log(id, "idddddddddddddddddddd");
  // 	sessionStorage.setItem("proid", id);
  // 	getdatatop(id);
  // 	// getdatacenter(id);
  // 	getdatabottom(id);
  // } else {
  // 	id = sessionStorage.getItem("proid");
  // 	getdatatop(id);
  // 	// getdatacenter(id);
  // 	getdatabottom(id);
  // }
  // console.log("2222222222");
});
// function aaa(data) {
// 	window.open(data, "_blank");
// }

// 在线预览
function downloadFile(data, name) {
  dialogVisible.value = true;
  state.d.text = name.file;
}
// 点击下载
function downloadFiles(data, name) {
  // download(data, name.file);
  saveAs(data, name.file);
}
//场景需求表格数据
const getsuerput = async () => {
  let { data: res } = await inuserput();
  let { data: res1 } = await AdminInputs();
  // console.log(res, "场景需求表格数据");
  // console.log(JSON.parse(res.data.list[0].checkin), "checkin,inuserput");
  // console.log(JSON.parse(res.data.list[0].contact), "contact,inuserput");
  // console.log(JSON.parse(res.data.list[0].demand), "demand,inuserput");
  // console.log(JSON.parse(res.data.list[0].info), "info,inuserput");
  // console.log(JSON.parse(res.data.list[0].rate), "rate,inuserput");
  // console.log(JSON.parse(res.data.list[0].repair), "repair,inuserput");
  let dt = JSON.parse(res1.data.list[0].info);
  state.admin.start = dt.StartTime;
  state.admin.cost = dt.cost;
  state.admin.info = dt.Describe;
  // var id = route.params.id;
  // if (!id) {

  // file字段返回值一个是列表
  state.d = JSON.parse(res.data.list[0].info);
  demand.value = res.data.list[0].demand;
  demand2.value = res.data.list[0].demand;
  console.log("xxxxxxxxxxxxxxxx", res.data.list[0].info);
  // }
};

// 新注释
//获取右侧顶部数据
// const getdatatop = async (id) => {
// 	var res = await ProjectGroupone({
// 		indicatorName: "设备在线分析",
// 		firstType: "项目概述",
// 		secondType: "",
// 		type: "day",
// 		thirdType: "",
// 		dataType: "day",
// 		dayFrom: "1900-01-01",
// 		dayTo: "2023-01-02",
// 		project_id: id,
// 	});

// 	var xlist = [];
// 	res.data.commonDailyDataList.forEach((item) => {
// 		item.day = `${item.day.substring(6, 7)}/${item.day.substring(8, 10)}`;
// 		if (!xlist.includes(item.day)) {
// 			xlist.push(item.day);
// 		}
// 	});
// 	sessionStorage.setItem("daylist", JSON.stringify(xlist));
// 	var type1 = res.data.commonDailyDataList.filter((item) => {
// 		return item.type == "type1";
// 	});
// 	var type2 = res.data.commonDailyDataList.filter((item) => {
// 		return item.type == "type2";
// 	});
// 	var type3 = res.data.commonDailyDataList.filter((item) => {
// 		return item.type == "type3";
// 	});
// 	var data1 = [];
// 	var data2 = [];
// 	var data3 = [];
// 	type1.forEach((item) => {
// 		data1.push(item.number1);
// 	});
// 	type2.forEach((item) => {
// 		data2.push(item.number1);
// 	});
// 	type3.forEach((item) => {
// 		data3.push(item.number1);
// 	});
// 	sessionStorage.setItem("data1", JSON.stringify(data1));
// 	sessionStorage.setItem("data2", JSON.stringify(data2));
// 	sessionStorage.setItem("data3", JSON.stringify(data3));
// };
//获取右侧底部图表数据
// const getdatabottom = async (id) => {
// 	var res = await ProjectGroupone({
// 		indicatorName: "数据健康度分析",
// 		firstType: "项目概述",
// 		secondType: "",
// 		type: "day",
// 		thirdType: "",
// 		dataType: "day",
// 		dayFrom: "1900-01-01",
// 		dayTo: "2023-01-02",
// 		project_id: id,
// 	});
// 	console.log('页面测试',res);
// 	var xlist = [];
// 	res.data.commonDailyDataList.forEach((item) => {
// 		item.day = `${item.day.substring(6, 7)}/${item.day.substring(8, 10)}`;
// 		if (!xlist.includes(item.day)) {
// 			xlist.push(item.day);
// 		}
// 	});
// 	sessionStorage.setItem("daylist", JSON.stringify(xlist));
// 	var type1 = res.data.commonDailyDataList.filter((item) => {
// 		return item.type == "type1";
// 	});
// 	var type2 = res.data.commonDailyDataList.filter((item) => {
// 		return item.type == "type2";
// 	});
// 	var data1 = [];
// 	var data2 = [];
// 	type1.forEach((item) => {
// 		data1.push(item.number1);
// 	});
// 	type2.forEach((item) => {
// 		data2.push(item.number1);
// 	});
// 	sessionStorage.setItem("data1bot", JSON.stringify(data1));
// 	sessionStorage.setItem("data2bot", JSON.stringify(data2));
// 	console.log(res,'bottom')
// };

// const getdata = async () => {
// let res = await showcase(state.a);
// console.log(res);
// state.d.time = res.data.online_time;
// state.d.address = res.data.city;
// state.d.owner = res.data.owner;
// state.d.name = res.data.project_name;
// state.d.img = res.data.img;
// state.d.name = res.data.project_name;
//   console.log(res.data);
// };
</script>

<style lang="less" scoped>
.blueicon {
  display: flex;
}

.info {
  display: flex;
  flex-wrap: wrap;
  width: 144%;
  font-size: 12px;

  li:nth-child(-n + 2) {
    width: 100%;
  }

  li:nth-child(n + 3) {
    width: 50%;
    white-space: nowrap;
  }
}

.all {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

.leftaaa {
  width: 40%;
  height: 100%;
}

.rightaaq {
  width: 70%;
  margin-left: 8px;
}

.leftTop {
  background-color: white;
  margin-bottom: 8px;
  width: 100%;
  border-style: none;
  border-color: unset;
  box-shadow: rgb(77 98 165 / 10%) 0px 5px 20px 0px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: normal;
  font-style: normal;

  .title {
    padding: 20px;

    .word {
      font-family: SourceHanSansSC;
      font-weight: 550;
      font-size: 20px;
      color: rgb(77, 98, 165);
      font-style: normal;
      letter-spacing: 2px;
      line-height: 28px;
      text-decoration: none;
    }
  }

  .line {
    border-bottom: 2px rgba(77, 98, 165, 0.2) solid;
  }

  .Onecontant {
    .oneMiddle {
      padding: 15px;
      padding-bottom: 8px;

      img {
        display: block;
        width: 151px;
        height: 101px;
        float: right;
        border-radius: 8px;
      }

      ul {
        list-style: none;

        li {
          font-family: SourceHanSansSC;
          font-weight: 400;
          font-size: 14px;
          color: rgb(126, 126, 126);
          font-style: normal;
          letter-spacing: 0px;
          line-height: 20px;
          text-decoration: none;
        }
      }
    }
  }

  .oneBottom {
    width: 100%;
    padding: 0px 20px 15px 20px;
    display: flex;
    flex-direction: column;
    align-content: stretch;
    justify-content: space-around;

    .oneBottomBuleLeft {
      width: 100%;
      height: 240px;
      background-color: rgb(246, 250, 255);
      border-style: none;
      border-color: unset;
      border-radius: 4px;
      font-size: 14px;
      line-height: 20px;
      font-weight: normal;
      font-style: normal;

      .blueTitle {
        font-family: SourceHanSansSC;
        font-weight: 400;
        font-size: 14px;
        color: rgba(127, 127, 127, 1);
        font-style: normal;
        letter-spacing: 0px;
        line-height: 20px;
        text-decoration: none;
        padding: 10px;
      }

      ul {
        margin-bottom: 15px;
        margin-left: 10px;
      }

      li {
        font-family: SourceHanSansSC;
        font-weight: 400;
        font-size: 14px;
        color: rgb(126, 126, 126);
        font-style: normal;
        letter-spacing: 0px;
        line-height: 20px;
        text-decoration: none;
      }
    }

    .oneBottomBuleRight {
      margin-top: 10px;
      height: 222px;
      background-color: rgb(246, 250, 255);
      border-style: none;
      border-color: unset;
      border-radius: 4px;
      font-size: 14px;
      line-height: 20px;
      font-weight: normal;
      font-style: normal;
      // overflow:auto;

      .blueTitle {
        font-family: SourceHanSansSC;
        font-weight: 400;
        font-size: 14px;
        color: rgba(127, 127, 127, 1);
        font-style: normal;
        letter-spacing: 0px;
        line-height: 20px;
        text-decoration: none;
        padding: 10px;
      }

      .oneBottomBluessss {
        height: 180px;
        overflow-y: auto;
        -ms-scroll-limit: none; // 火狐
      }

      .oneBottomBluessss::-webkit-scrollbar {
        // display: none; /* Chrome Safari */
        width: 5px;
      }

      .blueTitleright {
        width: 100%;
        // background-color: rgba(127, 255, 212, 0.536);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 10px 0px 10px;
        font-family: SourceHanSansSC;
        font-weight: 400;
        font-size: 14px;
        color: rgb(126, 126, 126);
        font-style: normal;
        letter-spacing: 0px;
        line-height: 20px;
        text-decoration: none;
        line-height: 20px;
      }

      ul {
        margin-bottom: 15px;
        margin-left: 10px;
      }

      li {
        font-family: SourceHanSansSC;
        font-weight: 400;
        font-size: 14px;
        color: rgb(126, 126, 126);
        font-style: normal;
        letter-spacing: 0px;
        line-height: 20px;
        text-decoration: none;
      }
    }
  }
}

/deep/.icon2 {
  margin-top: 4px;
}

.all {
  min-width: 1600px;
}
</style>
<style>
.tooltip-base-box {
  width: 600px;
}

.tooltip-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tooltip-base-box .center {
  justify-content: center;
}

.tooltip-base-box .box-item {
  width: 110px;
  margin-top: 10px;
}
</style>
